iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 4
1
Mobile Development

「Google Flutter」學習筆記系列 第 4

【Day 4】Flutter MaterialApp UI 架構

  • 分享至 

  • xImage
  •  

今日要點
》Flutter MaterialApp 程式樣貌


為了把你推進 Flutter 坑裡, 今天來簡單介紹一下 Flutter 的樣子。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: MyHomePage(),
    );}
}
class MyHomePage extends StatefulWidget {...}
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(...),
      drawer: Drawer(...),
      body: Center(...),
      floatingActionButton: FloatingActionButton(...),
    

上面這段程式碼,就是在設定你的畫面長相,Scaffold 都幫你準備好了,你只要把設定傳給他,就搞定一個常見的UI了

appBar 就是說我上面要有一個應用程式的表頭列
drawer 就是說我左上要有一個漢堡選單頁
body 就是中間那段內容你要放什麼
floatingActionButton 就是如果你右下想要有個按鍵,就設定它

appBar 應用程式的表頭列

drawer 漢堡選單頁,左側選單頁的基本的操作模式都準備好了,就只等你把內容填上來。

body 中間內容

floatingActionButton 右下按鍵

有點神奇,簡單把元素設一設就有一個有模有樣的介面. 你能說不神奇嗎. 想當初我們被整個暈頭轉向的。

而且寫完,iOS 跟 Android 就都搞定了,如果你的專案內容不複雜,功能也很簡單,實在很難不心動用 Flutter 來實作 ,只是又要多學一個其他地方用不太到的語言,會有點掙扎就是了。

嗯,我要先下班去了,再不回家就沒公車坐啦。內容晚點再補上,今天開會實在開的太晚了。

第4天,還沒打完 @@

參考:
Material Design


上一篇
【Day 3】常用的 Flutter 指令
下一篇
【Day 5】flutter_layout_article - 即使是初學者也必須知道的高級佈局規則
系列文
「Google Flutter」學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言